<!-- 统计分析 - 数据目录 -->
<script>
import { defineComponent, createApp, h } from 'vue';
import GlobalCard from '@/components/GlobalCard/global-card.vue';
let MyChart = null;
function getRandomData(min, max) {
  return Number(parseFloat((max - min) * Math.random() + min).toFixed(2))
}
// unit 单位
// echartData 系列1 的数据
// echartData2 系列2 的数据
// name1 系列2 的名称
// name2 系列2 的名称
// threshold 系列1 的阈值
// threshold2 系列2 的阈值
function RenderChartTemp({ echartData, echartData2, unit, name, name2, threshold, threshold2 }) {
  if (MyChart) {
    MyChart.dispose();
    MyChart = null;
  }
  MyChart = echarts.init(document.getElementById('Main-source-echart'));
  let bgColor = "#031933";

  let xAxisData = echartData.map(v => v.name);
  let yAxisData1 = echartData.map(v => v.value);
  let yAxisData2 = echartData2.map(v => v.value);
  let color = [
    "#5189F8",
    "#ff9800"
  ];
  const hexToRgba = (hex, opacity) => {
    let rgbaColor = "";
    let reg = /^#[\da-f]{6}$/i;
    if (reg.test(hex)) {
      rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
        "0x" + hex.slice(3, 5)
      )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
    }
    return rgbaColor;
  }
  const seriesData = [{
    name: name,
    type: "line",
    smooth: true,
    symbolSize: 8,
    zlevel: 3,
    lineStyle: {
      normal: {
        color: color[0],
        shadowBlur: 3,
        shadowColor: hexToRgba(color[0], 0.5),
        shadowOffsetY: 8
      }
    },
    areaStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [{
            offset: 0,
            color: hexToRgba(color[0], 0.3)
          },
          {
            offset: 1,
            color: hexToRgba(color[0], 0.1)
          }
          ],
          false
        ),
        shadowColor: hexToRgba(color[0], 0.1),
        shadowBlur: 10
      }
    },
    label: {
      show: true,
      position: 'top',
      fontWeight: 'bold',
    },
    data: yAxisData1,
    markLine: {
      data: [
        {
          yAxis: threshold, // 设置阈值线的位置
          name: '阈值',
          symbol: ['none', 'none'], // 去掉箭头
          label: {
            show: true,
            distance: [25, 0],
            color: color[0],
            fontSize: '1.3rem',
            fontFamily: 'ALIBABAPUHUI-REGU',
            position: 'end', // 标签位置
            formatter: '{b}: {c}', // 标签内容
          },
          lineStyle: {
            color: color[0], // 线条颜色
            width: 2, // 线条宽度
            type: 'dashed', // 线条类型
          },
        },]
    }
  }]
  if (yAxisData2.length) {
    seriesData.push({
      name: name2,
      type: "line",
      smooth: true,
      symbolSize: 8,
      zlevel: 3,
      lineStyle: {
        normal: {
          color: color[1],
          shadowBlur: 3,
          shadowColor: hexToRgba(color[1], 0.5),
          shadowOffsetY: 8
        }
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [{
              offset: 0,
              color: hexToRgba(color[1], 0.3)
            },
            {
              offset: 1,
              color: hexToRgba(color[1], 0.1)
            }
            ],
            false
          ),
          shadowColor: hexToRgba(color[1], 0.1),
          shadowBlur: 10
        }
      },
      label: {
        show: true,
        position: 'top',
        fontWeight: 'bold',
      },
      data: yAxisData2,
      markLine: {
        data: [
          {
            yAxis: threshold2, // 设置阈值线的位置
            name: '阈值',
            symbol: ['none', 'none'], // 去掉箭头
            label: {
              show: true,
              distance: [25, 0],
              color: color[1],
              fontSize: '1.3rem',
              fontFamily: 'ALIBABAPUHUI-REGU',
              position: 'end', // 标签位置
              formatter: '{b}: {c}', // 标签内容
            },
            lineStyle: {
              color: color[1], // 线条颜色
              width: 2, // 线条宽度
              type: 'dashed', // 线条类型
            },
          },]
      }
    })
  }
  const option = {
    backgroundColor: bgColor,
    color: color,
    legend: {
      show: true,
      textStyle: {
        fontSize: '14',
        color: '#fff',
        fontFamily: 'ALIBABAPUHUI-REGU'
      }
    },
    tooltip: {
    },
    grid: {
      top: 50,
      right: 100,
      bottom: 30,
      left: 20,
      containLabel: true
    },
    xAxis: [{
      type: "category",
      boundaryGap: false,
      axisLabel: {
        formatter: '{value}',
        textStyle: {
          fontFamily: 'ALIBABAPUHUI-REGU',
          color: "#fefefe"
        }
      },
      axisLine: {
        lineStyle: {
          color: "#D9D9D9"
        }
      },
      data: xAxisData
    }],
    yAxis: [{
      type: "value",
      name: unit,
      axisLabel: {
        textStyle: {
          fontFamily: 'ALIBABAPUHUI-REGU',
          color: "#fefefe"
        }
      },
      nameTextStyle: {
        color: "#fff",
        fontFamily: 'ALIBABAPUHUI-REGU',
        fontSize: 12,
        lineHeight: 40
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "#696969"
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    }],
    series: seriesData
  };
  MyChart.setOption(option);
}
export default defineComponent({
  name: "over-lay",
  components: {
    GlobalCard,
  },
  setup() {
  },
  props: {
    mainTitle: {
      required: false,
      default: '指标'
    },
    mainTab: {
      required: false,
      default: 'temp'
    },
    activeTab: {
      required: false,
      default: 'shebei'
    }
  },
  data() {
    return {
      dialogVisible: true,
      activeTopTab: 'temp',
      activeMiddleTab: 'day',
      checkListTemp: ["出厂温度"],
      checkListPress: ["出厂压力"],
    }
  },
  mounted() {
    this.activeTopTab = this.mainTab;
    this.init();
  },
  unmounted() {
    if (MyChart) {
      MyChart.dispose();
      MyChart = null;
    }
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    init() {
      setTimeout(() => {
        this.doRender();
      }, 300)
    },
    doClose() {
      this.$emit('close')
    },

    switchTop(v) {
      this.activeTopTab = v;
      this.doRender();
    },
    switchMiddle(v) {
      this.activeMiddleTab = v;
      this.doRender();
    },
    doRender() {
      let echartData = []
      let echartData2 = []
      let unit = ''
      let min = 0;
      let min2 = 0;
      let max = 0;
      let max2 = 0;
      let name = '';
      let name2 = '';
      if (this.activeTab === 'shebei') {
        if (this.activeTopTab === 'temp') {
          unit = '温度: ℃'
          min = 120;
          max = 110;
          name = '锅炉内温度'
        } else {
          unit = '压力: MPA'
          min = 1.5;
          max = 1.2;
          name = '锅炉内压力'
        }
        if (this.activeMiddleTab === 'day') {
          echartData = [{
            name: "00:00",
            value: getRandomData(min, max),
          },
          {
            name: "02:00",
            value: getRandomData(min, max),
          },
          {
            name: "04:00",
            value: getRandomData(min, max),
          },
          {
            name: "06:00",
            value: getRandomData(min, max),
          },
          {
            name: "08:00",
            value: getRandomData(min, max),
          },
          {
            name: "10:00",
            value: getRandomData(min, max),
          },
          {
            name: "12:00",
            value: getRandomData(min, max),
          },
          {
            name: "14:00",
            value: getRandomData(min, max),
          },
          {
            name: "16:00",
            value: getRandomData(min, max),
          },
          {
            name: "18:00",
            value: getRandomData(min, max),
          },
          {
            name: "20:00",
            value: getRandomData(min, max),
          },
          {
            name: "22:00",
            value: getRandomData(min, max),
          }
          ];
        } else {
          echartData = [{
            name: dayjs().subtract(7, 'day').format('MM-DD'),
            value: getRandomData(min, max),
          },
          {
            name: dayjs().subtract(6, 'day').format('MM-DD'),
            value: getRandomData(min, max),
          },
          {
            name: dayjs().subtract(5, 'day').format('MM-DD'),
            value: getRandomData(min, max),
          },
          {
            name: dayjs().subtract(4, 'day').format('MM-DD'),
            value: getRandomData(min, max),
          },
          {
            name: dayjs().subtract(3, 'day').format('MM-DD'),
            value: getRandomData(min, max),
          },
          {
            name: dayjs().subtract(2, 'day').format('MM-DD'),
            value: getRandomData(min, max),
          },
          {
            name: dayjs().subtract(1, 'day').format('MM-DD'),
            value: getRandomData(min, max),
          },
          ];
        }
        RenderChartTemp({
          echartData: echartData,
          echartData2: [],
          unit: unit,
          name: name,
          name2: '',
          threshold: (max + min) / 2
        })

        return
      }


      if (this.activeTopTab === 'temp') {
        unit = '温度: ℃'
        min = 120;
        max = 135;

        min2 = 50;
        max2 = 60;
        name = '出厂温度'
        name2 = '回厂温度'
      } else {
        unit = '压力: MPA'
        min = 1.5;
        max = 1.2;

        min2 = 0.5;
        max2 = 1;
        name = '出厂压力'
        name2 = '回厂压力'
      }
      if (this.activeMiddleTab === 'day') {
        echartData = [{
          name: dayjs().subtract(23, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(22, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(21, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(20, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(19, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(18, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(17, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(16, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(15, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(14, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(13, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(12, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(11, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(10, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(9, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(8, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(7, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(6, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(5, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(4, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(3, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(2, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(1, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(0, 'hour').format('HH:00'),
          value: getRandomData(min, max),
        },
        ];
        echartData2 = [{
          name: dayjs().subtract(23, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        },
        {
          name: dayjs().subtract(22, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(21, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(20, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(19, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(18, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(17, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(16, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(15, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(14, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(13, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(12, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(11, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(10, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(9, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(8, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(7, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(6, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(5, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(4, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(3, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(2, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(1, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        }, {
          name: dayjs().subtract(0, 'hour').format('HH:00'),
          value: getRandomData(min2, max2),
        },
        ];
      } else {
        echartData = [{
          name: dayjs().subtract(7, 'day').format('MM-DD'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(6, 'day').format('MM-DD'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(5, 'day').format('MM-DD'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(4, 'day').format('MM-DD'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(3, 'day').format('MM-DD'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(2, 'day').format('MM-DD'),
          value: getRandomData(min, max),
        },
        {
          name: dayjs().subtract(1, 'day').format('MM-DD'),
          value: getRandomData(min, max),
        },
        ];
        echartData2 = [{
          name: dayjs().subtract(7, 'day').format('MM-DD'),
          value: getRandomData(min2, max2),
        },
        {
          name: dayjs().subtract(6, 'day').format('MM-DD'),
          value: getRandomData(min2, max2),
        },
        {
          name: dayjs().subtract(5, 'day').format('MM-DD'),
          value: getRandomData(min2, max2),
        },
        {
          name: dayjs().subtract(4, 'day').format('MM-DD'),
          value: getRandomData(min2, max2),
        },
        {
          name: dayjs().subtract(3, 'day').format('MM-DD'),
          value: getRandomData(min2, max2),
        },
        {
          name: dayjs().subtract(2, 'day').format('MM-DD'),
          value: getRandomData(min2, max2),
        },
        {
          name: dayjs().subtract(1, 'day').format('MM-DD'),
          value: getRandomData(min2, max2),
        },
        ];
      }
      RenderChartTemp({ 
        echartData,
        echartData2,
        unit,
        name,
        name2,
        threshold: (max + min) / 2,
        threshold2: (max2 + min2) / 2,
       })
    }
  }
});
</script>
<template>
  <el-dialog modal-class="self-modal-class" append-to-body v-model="dialogVisible" :title="mainTitle" width="1200"
    @close="doClose">
    <template #header>
      <span class="font-alimamashuheiti" style="color: #fff; font-size: 2rem">
        {{ mainTitle }}
      </span>
    </template>
    <div class="top-tabs">
      <div class="tab-item cursor-pointer font-AlibabaPuhui" :class="[
        activeTopTab === 'temp' ? 'active' : ''
      ]" @click="switchTop('temp')">温度指标</div>
      <div class="tab-item cursor-pointer font-AlibabaPuhui" :class="[
        activeTopTab === 'press' ? 'active' : ''
      ]" @click="switchTop('press')">压力指标</div>
    </div>
    <div class="middle-tabs">
      <div class="left">
        <div class="tab-item cursor-pointer font-AlibabaPuhui" :class="[
          activeMiddleTab === 'day' ? 'active' : ''
        ]" @click="switchMiddle('day')">24 小时统计</div>
        <div class="tab-item cursor-pointer font-AlibabaPuhui" :class="[
          activeMiddleTab === 'week' ? 'active' : ''
        ]" @click="switchMiddle('week')">周统计</div>
      </div>
      <!-- <div class="right">
        <span>指标选择:</span>
        <el-checkbox-group v-if="activeTopTab === 'temp'" v-model="checkListTemp">
          <el-checkbox label="出厂温度" value="出厂温度" />
          <el-checkbox label="回厂温度" value="回厂温度" />
        </el-checkbox-group>
        <el-checkbox-group v-if="activeTopTab === 'press'" v-model="checkListPress">
          <el-checkbox label="出厂压力" value="出厂压力" />
          <el-checkbox label="回厂压力" value="回厂压力" />
        </el-checkbox-group>
      </div> -->
    </div>
    <div id="Main-source-echart">
    </div>
  </el-dialog>
</template>
<style lang="less">
.el-overlay.self-modal-class {
  & .el-dialog {
    background-color: #000;
    background-image: linear-gradient(to right, rgba(4, 30, 60, 0.9), rgba(4, 30, 60, 0.8));
  }

  & .el-dialog__title {
    color: #fff;
  }
}
</style>
<style scoped lang="less">
#Main-source-echart {
  height: 50rem;
}

.top-tabs {
  display: inline-flex;
  margin-bottom: 1rem;

  &>.tab-item {
    font-size: 1.6rem;
    padding: .5rem 1rem;
    border-bottom: 1px solid transparent;
    color: #bababa;

    &.active {
      color: #165dff;
      border-bottom: .2rem solid #165dff;
    }
  }
}

.middle-tabs {
  padding-top: 1rem;
  border-top: 1px solid #333;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &>.left {
    display: inline-flex;
    margin-bottom: 1rem;

    &>.tab-item {
      font-size: 1.4rem;
      border-radius: 10rem;
      padding: .2rem .8rem;
      border: 1px solid transparent;
      background-color: #f2f3f5;
      color: #4e5969;
      margin-right: 1rem;

      &.active {
        color: #fff;
        border: .2rem solid #165dff;
        background-color: #165dff;
      }
    }
  }
}
</style>